<template>
  <div class="project_box">
    <div class="project_title">
      <li class="project_left">
        <p>
          {{ list.title }}
          <sub>/{{ list.subtitle }}</sub>
        </p>

        <img class="icon1" src="@/assets/home/icon1.png" alt="" />
        <img class="icon2" src="@/assets/home/icon2.png" alt="" />
      </li>
      <slot name="project_ri"></slot>
    </div>
    <slot name="tabs"></slot>
    <slot name="userList"></slot>
    <div v-if="list.projectlist.length" class="project_list">
      <div
        class="list_box"
        v-for="(item, index) in list.projectlist"
        :key="item.id"
        @click="godetail(item.id, list.type)"
      >
        <img
          class="list_img"
          v-lazy="
            list.type == 3
              ? 'https://images.weserv.nl/?url=' + item.file
              : list.type == 4
              ? 'https://images.weserv.nl/?url=' + item.Cover
              : 'https://images.weserv.nl/?url=' + item.cover
          "
          alt=""
          :key="
            list.type == 3
              ? item.file
              : list.type == 4
              ? item.Cover
              : item.cover
          "
        />
        <p class="snp1">{{ item.coursetitle }}</p>
        <li>
          <div>
            <img class="list_icon" src="@/assets/home/list-icon.png" alt="" />
            <span>{{ item.peoplecount }}</span>
          </div>
          <span>{{ item.time }}</span>
        </li>
      </div>
    </div>
    <el-empty v-if="list.projectlist.length == 0" description="暂无数据" />
  </div>
</template>

<script setup>
  const list = defineProps({
    title: String,
    type: Number,
    projectlist: Array,
    subtitle: String,
  });
  // lqhcabatnj1ddgvdjseaa
  const godetail = (id, type) => {
    console.log(id, type);
    // return
    let url = "";
    if (type == 1 || type == 4) {
      url = `https://zyk.icve.com.cn/portal/courseinfo?courseid=${id}`;
    } else if (type == 2) {
      url = `https://zyk.icve.com.cn/portal_new/newweikeinfo/weikeinfo?weikeid=${id}`;
    } else if (type == 3) {
      url = `https://zyk.icve.com.cn/portal/manage-sourcematerialofindex-editmaterial?docid=${id}`;
    }
    console.log(id, type);
    console.log(url, "99999999999999999999");
    window.open(url);
  };
</script>

<style lang="scss" scoped>
  @media screen and (min-width: 1200px) {
    .project_box {
      width: 100%;
      padding-bottom: 30px;

      .project_title {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;

        .project_left {
          height: 38px;
          border-radius: 6px 0 0 6px;
          color: #ffffff;
          display: flex;
          align-items: center;
          position: relative;
          background-color: #1cabd9;
          p {
            padding-left: 10px;
            position: relative;
            z-index: 5;
            font-size: 20px;
          }
          sub {
            position: relative;
            z-index: 5;
            font-size: 7px;
            bottom: 5px;
          }

          .icon1 {
            position: absolute;
            height: 38px;
            right: -32px;
            bottom: 0;
          }
          .icon2 {
            width: 75px;
            position: absolute;
            height: 25px;
            bottom: -6px;
            right: -48px;
          }
        }
      }

      .project_list {
        display: grid;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 26px;
        grid-template-columns: repeat(auto-fill, 175px);
        grid-gap: 0 1px;

        .list_box {
          margin-bottom: 20px;
          background: #ffffff;
          box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.03);
          overflow: hidden;
          cursor: pointer;
          transition: all 0.5s;

          .list_img {
            width: 100%;
            height: 114px;
            display: block;
          }

          p {
            font-size: 14px;
            font-weight: 400;
            color: #222222;
            margin: 8px 0;
            padding: 0 20px;
          }
          li {
            height: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 20px;
            border-top: 1px solid #e4e4e4;
            div {
              display: flex;
              .list_icon {
                width: 12px;
                height: 12px;
                margin-right: 6px;
              }
            }
            span {
              font-size: 10px;
              font-weight: 400;
              color: #666666;
            }
          }
        }

        .list_box:hover {
          background-color: #1cabd9;

          span,
          p {
            color: #ffffff;
          }

          .list_icon {
            filter: brightness(300%);
          }
        }
      }
    }
  }

  @media screen and (max-width: 1200px) {
    .el-empty {
      width: 100%;
    }

    .project_box {
      width: 100%;
      padding-bottom: 5vw;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .project_title {
        display: flex;
        width: 95vw;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5vw;

        .project_left {
          // min-width: 38vw;
          height: 8vw;
          border-radius: 0.9vw 0 0 0.9vw;
          color: #ffffff;
          display: flex;
          align-items: center;
          position: relative;
          background-color: #1cabd9;

          div {
            display: flex;
            align-items: flex-end;

            p {
              padding-left: 3vw;
              position: relative;
              z-index: 5;
              font-size: 4vw;
            }

            sub {
              position: relative;
              z-index: 5;
              font-size: 1.8vw;
              bottom: 0.5vw;
            }
          }

          .icon1 {
            // width: 38vw;
            position: absolute;
            height: 8vw;
            right: -6vw;
            bottom: 0;
          }

          .icon2 {
            width: 14vw;
            position: absolute;
            height: 5vw;
            bottom: -1vw;
            right: -8.5vw;
          }
        }
      }

      .project_list {
        width: 95vw;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 5vw;

        .list_box {
          margin-bottom: 3vw;
          width: 45vw;
          // height: 274px;
          background: #ffffff;
          box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.03);
          border-radius: 1vw;
          overflow: hidden;

          .list_img {
            width: 45vw;
            // height: 190px;
          }

          p {
            width: 43vw;
            font-size: 2.1333vw;
            font-weight: 400;
            color: #333333;
            margin: 2vw 0;
            padding-left: 2vw;
          }

          li {
            width: 45vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2vw;
            margin-bottom: 2vw;
            div {
              display: flex;
              align-items: center;
              .list_icon {
                width: 3.5vw;
                height: 3.5vw;
                margin-right: 0.5vw;
              }
            }

            span {
              font-size: 1.8vw;
              font-weight: 400;
              color: #666666;
              // margin-bottom: 2vw;
            }
          }
        }
      }
    }
  }
</style>
